<template>
  <div v-if="!loading" class="home">
    <van-nav-bar title="优惠券核销" fixed safe-area-inset-top />
    <div class="list">
      <van-cell-group :border="false">
        <van-cell>
          <template #title>
            <span class="cell_label">券名：</span>
          </template>
          <template>
            <span class="cell_value">{{ copuonInfo.couponName }}</span>
          </template>
        </van-cell>
        <!-- <van-cell>
          <template #title>
            <span class="cell_label">活动名：</span>
          </template>
          <template>
            <span class="cell_value">{{ ticketinfo.goodsName }}</span>
          </template>
        </van-cell> -->
        <van-cell>
          <template #title>
            <span class="cell_label">核销有效时间：</span>
          </template>
          <template>
            <span class="cell_value">{{
              copuonInfo.startTime
                ? `${copuonInfo.startTime}-${copuonInfo.endTime}`
                : "无期限"
            }}</span>
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <span class="cell_label">核销用户姓名：</span>
          </template>
          <template>
            <span class="cell_value">{{ copuonInfo.memberName }}</span>
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <span class="cell_label">核销人手机号：</span>
          </template>
          <template>
            <span class="cell_value">{{ copuonInfo.memberPhone }}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <div class="btn">
      <van-button
        type="info"
        block
        round
        @click="take"
        :disabled="copuonInfo.status != 1"
        >{{
          copuonInfo.status == 1
            ? "核销"
            : copuonInfo.status == 2
            ? "已核销"
            : copuonInfo.status == 3
            ? "已过期"
            : "已作废"
        }}</van-button
      >
    </div>
  </div>
</template>

<script>
import api from "@/api/api";

export default {
  components: {},
  props: {},
  data() {
    return {
      sn: "",
      amount: 0,
      copuonInfo: {},
      loading: true,
    };
  },
  watch: {},
  computed: {},
  methods: {
    async getDetail() {
      this.$toast.loading("加载中");
      let res = await api
        .coupon_detail({
          couponSn: this.sn,
          amount: this.amount,
        })
        .finally(() => {
          this.loading = false;
        });
      this.copuonInfo = res;
      this.$toast.clear();
    },
    take() {
      if (this.copuonInfo.status > 1) {
        this.$toast("优惠券已核销或已过期作废，请勿重复点击");
        return;
      }
      api
        .writeOff_coupon({
          couponSn: this.sn,
          amount: this.amount,
        })
        .then(async () => {
          await this.getDetail();
          this.$toast({
            message: "核销成功",
            duration: 1500,
          });
        })
        .catch((err) => {
          this.$toast(err);
        });
    },
  },
  created() {},
  mounted() {
    this.sn = this.$route.query.couponSn;
    this.amount = this.$route.query.amount;
    this.getDetail();
  },
};
</script>
<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
    no-repeat;
  background-size: cover;
  background-attachment: local;
  background-position: top center;
  box-sizing: border-box;
  padding: 150px 30px 60px 30px;
  position: relative;
  .list {
    padding: 60px 0 0 0;
    /deep/ .van-cell-group {
      background-color: transparent;
      .van-cell {
        background-color: transparent;
        .cell_label {
          font-size: 56px;
          font-weight: bold;
          color: #000;
        }
        .cell_value {
          font-size: 50px;
          color: #69747c;
        }
      }
    }
    /deep/ .van-cell::after {
      border-bottom: 1px solid #000 !important;
    }
  }
  .btn {
    margin-top: 100px;
    padding: 0 200px;
  }
}
</style>
